import React, { useState, useCallback,useEffect } from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
import Checkbox from "antd/lib/checkbox";
import Select from "antd/lib/select";
import Input from "antd/lib/input";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import notification from "@/services/notification";

const { Option } = Select;

function AddUrlDialog({ dialog, dashboard, widget }) {
  const [widgetOptions, setWidgetOptions] = useState({type:'url'});

  useEffect(() => {
    if (widget.options) {
      if (widget.options.widgetOptions) {setWidgetOptions(widget.options.widgetOptions);}
    }
  },[widget]);

  function processChange(key, value) {
    let ps = {...widgetOptions}
    ps[key] = value

    setWidgetOptions(ps);
  }

  const saveWidget = useCallback(() => {
    if (widgetOptions.hasOwnProperty("url")) {
      dialog.close({ widgetOptions }).catch(() => {
        notification.error("外部链接未能添加！");
      });
    } else {
      notification.error("链接地址不能为空！");
    }
  }, [dialog, widgetOptions]);

  return (
    <Modal
      {...dialog.props}
      maskClosable = {false}
      title={Object.getOwnPropertyNames(widget).length === 0 ? "添加外部链接" : "编辑外部链接：" + widget.id}
      onOk={saveWidget}
      okButtonProps={{
        ...dialog.props.okButtonProps,
        disabled: dialog.props.okButtonProps.disabled,
      }}
      okText={Object.getOwnPropertyNames(widget).length === 0 ? "添加至报表" : "确定"}
      cancelText="取消"
      width={700}
    >
      <div data-test="AddWidgetDialog">
        外部链接网址：
        <Input type="text" style={{width:300}}
          value={(widgetOptions && widgetOptions.url) || ""}
          onChange={e => processChange("url", e.target.value)}
        />
      </div>  
      <div>
        <br/>
        部件个性标题：
        <Input type="text" style={{width:300}}
          value={(widgetOptions && widgetOptions.widget_title) || ""}
          title="支持HTML5语法"
          onChange={e => processChange("widget_title", e.target.value)}
        />
        &nbsp;&nbsp;
        <Checkbox
          name="title_center"
          checked={widgetOptions && widgetOptions.title_center}
          onChange={e => processChange("title_center", e.target.checked)}>
          部件标题居中
        </Checkbox>  
        <br/>
        (支持url取数函数)<a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a>；例：&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;
      </div>  
      <div>
        <br/>
        部件边框样式：
        <Select style={{ width: 200 }} 
          value={widgetOptions && widgetOptions.widget_border}
          onChange={value => processChange("widget_border", value)}>
        <Option value=''>--无边框--</Option>
        <Option value='line'>单线框</Option>
        <Option value='border'>四角加粗</Option>
        <Option value='bold'>线框四角加粗</Option>
        <Option value='middle'>线框四角加粗(标题栏居中)</Option>
        <Option value='cloud'>四角祥云</Option>
        <Option value='linecloud'>线框四角祥云</Option>
        </Select>
        &nbsp;&nbsp;
        <Checkbox
          name="widget_bgtransparent"
          checked={widgetOptions && widgetOptions.widget_bgtransparent}
          onChange={e => processChange("widget_bgtransparent", e.target.checked)}>
          部件背景透明（不应用部件背景样式）
        </Checkbox>  
        <Checkbox
          name="widget_noscroll"
          checked={widgetOptions && widgetOptions.widget_noscroll}
          onChange={e => processChange("widget_noscroll", e.target.checked)}>
          禁止滚动条
        </Checkbox>  
        <Checkbox
          name="widget_nomenu"
          checked={widgetOptions && widgetOptions.widget_nomenu}
          onChange={e => processChange("widget_nomenu", e.target.checked)}>
          禁止菜单(Portal模式)
        </Checkbox>  
      </div>  
      {/* <div>
        <br/>
        <Checkbox
          name="hide_scrolling"
          checked={widgetOptions && widgetOptions.hide_scrolling}
          onChange={e => processChange("hide_scrolling", e.target.checked)}>
          隐藏内容滚动条
        </Checkbox>  
      </div> */}
      <div>
        <br/>
        <Checkbox
          name="no_refresh"
          checked={widgetOptions && widgetOptions.no_refresh}
          onChange={e => processChange("no_refresh", e.target.checked)}>
          不随报表自动刷新
        </Checkbox>  
        &nbsp;&nbsp;
        <Checkbox
          name="mainWidget"
          checked={widgetOptions && widgetOptions.mainWidget}
          onChange={e => processChange("mainWidget", e.target.checked)}>
          设置为主部件
        </Checkbox>  
        (Portal模式充满报表背景区)
        <Checkbox
          name="widget_toplayer"
          checked={widgetOptions && widgetOptions.widget_toplayer}
          disabled={widgetOptions && widgetOptions.mainWidget}
          onChange={e => processChange("widget_toplayer", e.target.checked)}>
          置于顶层
        </Checkbox>  
      </div>  
      <div>
        <br/>
        使用外部链接注意事项：<br/>
        1、首先，外部链接网站url格式必须完整（如：https://redash.io）；<br/>  
        2、其次，外部链接网站要允许外部iframe访问（详见安装部署手册）；<br/>  
        3、另外，要把外部链接网站加入到信任域里（环境变量配置详见安装部署手册）。<br/>  
        <br/>
      </div>
    </Modal>
  );
}

AddUrlDialog.propTypes = {
  dialog: DialogPropType.isRequired,
  widget: PropTypes.object,
};

AddUrlDialog.defaultProps = {
  widget: {},
};

export default wrapDialog(AddUrlDialog);
